<script setup>
import { onMounted, ref } from "vue";
import { useIndexStore } from "../store";
const store = useIndexStore();

const menu_change = (menu_item) => {
  store.menu_item = menu_item
}

</script>

<template>
  <div  class="flex items-center text-[20px] text-white font-bold">
    <div class="h-full w-12">
      <img src="/src/assets/message.svg" alt="message" />
    </div>
    <div>科技OA协同办公系统</div>
  </div>
  <div class="flex items-center justify-between *:p-2 *:h-full *:cursor-pointer *:flex *:items-center">
    <template v-for="menu in store.menu_lists">
      <div class="hover:bg-[rgb(145,94,145)] flex" @click="menu_change(menu)">
        <div v-if="menu.icon" class="h-full w-6 flex justify-center items-center">
          <img src="/computer.svg" alt="" />
        </div>
         <div>{{ menu.title }}</div>
      </div>
    </template> 
  </div>
  <div class="flex items-center justify-between *:p-2 *:h-full *:cursor-pointer">
    <div class="hover:bg-[rgb(145,94,145)] flex items-center">
      <div class="h-full w-6 flex justify-center items-center">
        <img src="/src/assets/phone.svg" alt="" />
      </div>
      <div>手机版</div>
    </div>
    <div class="hover:bg-[rgb(145,94,145)] flex items-center">
      <div class="h-full w-6 flex items-center">
        <img src="/src/assets/talk.svg" alt="" />
      </div>
      <div>实时通信</div>
    </div>
    <div class="hover:bg-[rgb(145,94,145)] flex items-center *:m-1">
      <div class="h-full w-6 flex justify-center items-center">
        <img src="/src/assets/vue.svg" alt="" />
      </div>
      <div>管理员</div>
      <div class="h-full w-4 flex justify-center items-center">
        <img src="/src/assets/bottom.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<style scoped></style>